<template>
  <el-dialog
    :visible.sync="chooseQuestionShow"
    title="选择试题"
    @close="cancle"
  >
    <el-form ref="form" :model="formData" :inline="true" label-width="100px">
      <el-form-item size="mini">
        <el-select
          v-model="formData.subject_id"
          placeholder="请选择学科"
          @focus="getSubjectTree"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item size="mini">
        <el-select
          v-model="formData.directory_id"
          placeholder="请选择目录"
          @focus="getdirectoryList"
        >
          <el-option
            v-for="item in directoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item size="mini">
        <el-select
          v-model="formData.tag_id"
          placeholder="请选择标签名称"
          @focus="getTagList"
        >
          <el-option
            v-for="item in tagList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item size="mini">
        <el-select
          v-model="formData.quest_type"
          placeholder="请选择试题类型"
          disabled
        >
          <el-option label="单选" :value="1" />
          <el-option label="多选" :value="2" />
          <el-option label="判断" :value="3" />
          <el-option label="简答" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item size="mini">
        <el-select
          v-model="formData.check_state"
          placeholder="请选择审核状态"
          disabled
        >
          <el-option label="待审核" :value="1" />
          <el-option label="审核通过" :value="2" />
          <el-option label="不通过" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item size="mini">
        <el-select
          v-model="formData.show_state"
          placeholder="请选择发布状态"
          disabled
        >
          <el-option label="上架" :value="1" />
          <el-option label="下架" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item size="mini" label-width="68px">
        <el-input v-model="formData.create_name" placeholder="请输入创造者" />
      </el-form-item>
      <el-form-item size="mini" label-width="84px">
        <el-select v-model="formData.difficulty" placeholder="请选择试题难度">
          <el-option label="简单" :value="1" />
          <el-option label="中等" :value="2" />
          <el-option label="困难" :value="3" />
        </el-select>
      </el-form-item>
      <el-row type="flex" align="middle">
        <el-form-item size="mini">
          <el-select
            v-model="formData.is_true_question"
            placeholder="请选择试题难度"
          >
            <el-option label="是" :value="1" />
            <el-option label="否" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item size="mini">
          <el-date-picker
            v-model="create_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label-width="400px" style="margin-left: 150px">
          <el-button size="mini" type="primary" @click="getQuestionList"
            >查询</el-button
          >
          <el-button size="mini" @click="resetBtn">重置</el-button>
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-menu"
            @click="changeInfo = !changeInfo"
          />
        </el-form-item>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="questionList"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="试题信息">
          <template slot-scope="scope">
            <el-row :gutter="20">
              <el-col :span="3"
                ><div>ID:{{ scope.row.id }}</div></el-col
              >
              <el-col :span="12">
                <div>
                  题干信息:<a
                    class="html_p"
                    @click="questionShow(scope.row)"
                    v-html="scope.row.question"
                  />
                </div>
              </el-col>
            </el-row>
            <div v-if="changeInfo">
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div>试题编号:{{ scope.row.quest_num }}</div></el-col
                >
                <el-col :span="4"
                  ><div>
                    试题类型:{{
                      scope.row.quest_type === 1
                        ? "单选"
                        : scope.row.quest_type === 2
                        ? "多选"
                        : scope.row.quest_type === 3
                        ? "判断"
                        : "简答"
                    }}
                  </div></el-col
                >
                <el-col :span="4"
                  ><div>归属学科:{{ scope.row.subject_name }}</div></el-col
                >
                <el-col :span="5"
                  ><div>归属目录:{{ scope.row.directory_name }}</div></el-col
                >
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div>
                    标签信息:<span
                      v-for="(item, index) in scope.row.tag_info"
                      :key="index"
                      >{{ item }}
                    </span>
                  </div></el-col
                >
                <el-col :span="4"
                  ><div>
                    发布状态:<el-tag
                      size="mini"
                      :type="scope.row.show_state === 1 ? 'success' : 'info'"
                      >{{
                        scope.row.show_state === 1 ? "上架" : "下架"
                      }}</el-tag
                    >
                  </div></el-col
                >
                <el-col :span="4"><div>审核人:暂无</div></el-col>
                <el-col :span="5"
                  ><div>
                    审核状态:<el-tag
                      size="mini"
                      :type="scope.row.check_state === 2 ? 'success' : 'info'"
                      >{{
                        scope.row.check_state === 1
                          ? "待审核"
                          : scope.row.check_state === 2
                          ? "通过"
                          : "未通过"
                      }}</el-tag
                    >
                  </div></el-col
                >
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10"
                  ><div>
                    审核意见:
                    {{
                      scope.row.check_remarks ? scope.row.check_remarks : "暂无"
                    }}
                  </div></el-col
                >
                <el-col :span="4"
                  ><div>创建人:{{ scope.row.create_name }}</div></el-col
                >
                <el-col :span="4"
                  ><div>
                    难度:{{
                      scope.row.difficulty === 1
                        ? "简单"
                        : scope.row.difficulty === 2
                        ? "中等"
                        : "困难"
                    }}
                  </div></el-col
                >
                <el-col :span="5"
                  ><div>
                    发布时间:{{ scope.row.created_at | formatDate }}
                  </div></el-col
                >
              </el-row>
            </div>
            <div v-else>
              <el-row :gutter="20">
                <el-col :span="4"
                  ><div>归属学科:{{ scope.row.subject_name }}</div></el-col
                >
                <el-col :span="4"
                  ><div>归属目录:{{ scope.row.directory_name }}</div></el-col
                >
                <el-col :span="6"
                  ><div>
                    标签信息:<span
                      v-for="(item, index) in scope.row.tag_info"
                      :key="index"
                      >{{ item }}
                    </span>
                  </div></el-col
                >
                <el-col :span="4"
                  ><div>
                    发布状态:<el-tag
                      size="mini"
                      :type="scope.row.show_state === 1 ? 'success' : 'info'"
                      >{{
                        scope.row.show_state === 1 ? "上架" : "下架"
                      }}</el-tag
                    >
                  </div></el-col
                >
                <el-col :span="5"
                  ><div>
                    发布时间:{{ scope.row.created_at | formatDate }}
                  </div></el-col
                >
              </el-row>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- 题干信息弹出层 -->
    <QusetionShow ref="questionShow" />
    <!-- 分液器 -->
    <el-pagination
      :current-page="formData.page"
      :page-sizes="[10, 8, 6, 4]"
      :page-size="formData.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-row type="flex" justify="center">
      <el-button size="mini" plain type="primary" @click="cancle"
        >取消</el-button
      >
      <el-button size="mini" type="primary" @click="btnOk">确认</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { getSubjectTree } from "@/api/subject/subject";
import { getQuestionList } from "@/api/exam/question";
import QusetionShow from "@/views/exam/components/components/questionShow.vue";
export default {
  name: "ChooseQuestion",
  components: {
    QusetionShow,
  },
  data() {
    return {
      chooseQuestionShow: false,
      changeInfo: true,
      isCheck_stateShow: false,
      subjectList: [],
      directoryList: [],
      tagList: [],
      create_time: [],
      questionList: [],
      selectionList: [],
      selectionListId: [],
      question_data: [],
      checklist: [{ id: "", check_state: 2, check_remarks: "" }],
      total: 0,
      dialogShow: false,
      arr: [],
      formData: {
        subject_id: "", // 学科名称
        directory_id: "", // 目录名称
        tag_id: "",
        quest_type: "",
        check_state: 2,
        show_state: 1,
        create_name: "",
        difficulty: "",
        is_true_question: "",
        create_time: "",
        page: 1,
        limit: 10,
      },
    };
  },
  created() {
    this.getQuestionList();
  },
  methods: {
    async getSubjectTree() {
      this.subjectList = await getSubjectTree();
    },
    getdirectoryList() {
      const arr = this.subjectList.filter(
        (item) => item.id === this.formData.subject_id
      );
      if (arr.length === 0) {
        this.directoryList = [];
      } else {
        console.log(arr);
        this.directoryList = arr[0].children;
      }
    },
    getTagList() {
      const arr = this.directoryList.filter(
        (item) => item.id === this.formData.directory_id
      );
      if (arr.length === 0) {
        this.tagList = [];
      } else {
        console.log(arr);
        this.tagList = arr[0].children;
      }
    },
    async handleSizeChange(val) {
      this.formData.limit = val;
      await this.getQuestionList();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    async handleCurrentChange(val) {
      this.formData.page = val;
      await this.getQuestionList();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    async selectionChange(data) {
      console.log(data);
      this.question_data = data;
      data.forEach((item) => {
        this.arr.push(item.id);
      });
    },
    async getQuestionList() {
      const { list, total } = await getQuestionList(this.formData);
      this.questionList = list;
      this.total = total;
    },
    resetBtn() {},
    questionShow(data) {
      this.$refs.questionShow.dialogShow = true;
      this.$refs.questionShow.questionInfo = data;
    },
    async check_stateOkBtn() {},
    cancle() {
      this.formData = {};
      this.chooseQuestionShow = false;
    },
    btnOk() {
      this.$emit("question_data", this.question_data, this.arr);
      this.chooseQuestionShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 1000px;
}
::v-deep .html_p {
  display: inline-block;
  p {
    margin: 0;
  }
}
</style>
